import React, { useEffect, useState, } from 'react'

import { Button, Modal, List } from 'antd';

import styles from './index.module.css'
import { Fragment } from 'react/jsx-runtime';

function RecordsBtn(props) {
    //父控件传过来的值
    const { data } = props;
    const dataArray = JSON.parse(data);//json字符串转数据
    
    const [isModalOpen, setIsModalOpen] = useState(false);

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    const showCreateTaskModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleOk = () => {
        setIsModalOpen(false);

    };

    return (
        <Fragment>
            <Modal
                cancelText={'关闭'}
                okText={'确认'}
                title="任务详情"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}>
                <div>
                    <List
                        bordered
                        dataSource={dataArray}
                        renderItem={(item, index) => (
                            <List.Item>
                                <div>
                                    <span>{item.record}</span>
                                </div>
                            </List.Item>
                        )}
                    /></div>

            </Modal>
            <Button onClick={showCreateTaskModal} size={'small'} color="cyan" variant="solid">任务详情</Button>
        </Fragment>
    )
}


export default RecordsBtn

